<template>
    <div class="Lyric">
        <div class="Lyric2">
            <div class="Lyric5"></div>
            <div class="Lyric4" :style="{ backgroundImage: `url(${musicPlay2.img})` }"></div>
        </div>
        <div class="Lyric3">
            <LyricHead></LyricHead>
            <LyricBody></LyricBody>
            <LyricFoot></LyricFoot>
        </div>
    </div>
</template>

<script setup lang="ts">
import LyricHead from './LyricHead/LyricHead.vue';
import LyricBody from './LyricBody/LyricBody.vue';
import LyricFoot from './LyricFoot/LyricFoot.vue';
import { musicPlay2 } from '@/utils/playMusic';

</script>

<style scoped lang="scss">
.Lyric {
    width: 100%;
    height: 100%;
    position: relative;

    .Lyric2 {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;

        .Lyric4 {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        .Lyric5 {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 2;
            background-color: rgba(27, 26, 26, 0.475);
            backdrop-filter: blur(8px);
        }
    }

    .Lyric3 {
        position: absolute;
        padding-top: var(--lyricMargin);
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 60px 1fr 100px;
        box-sizing: border-box;
        z-index: 10;
    }
}
</style>